<template>
  <div id="sales-hot-statist"></div>
</template>
<script>
import { piePatternSrc, bgPatternSrc } from "@/api/constant";
import { getProfitAndLoss } from "@/api/orderApi";
export default {
  name: "ProfitAndLoss",
  data() {
    return {
      piePatternSrc: "",
      pieNode: [],
    };
  },
  created() {},
  mounted() {
    //  var myChart = echarts.init(chartDom);
    getProfitAndLoss().then((res) => {
      if (res.code == 0) {
        // res.data[index],下标针对后端的顺序修改
        let title = `盈亏统计\n
        历史总收入：${res.data[0].value}元\n
        历史总支出：${res.data[2].value}元\n
        历史总利润：${(res.data[0].value - res.data[2].value).toFixed(2)}元`
        var option;
        let myChart = this.$echarts.init(
          document.getElementById("sales-hot-statist")
        );
        this.myChart = myChart;
        var piePatternImg = new Image();
        piePatternImg.src = piePatternSrc;
        var bgPatternImg = new Image();
        bgPatternImg.src = bgPatternSrc;
        this.piePatternSrc = piePatternSrc;
        var itemStyle = {
          normal: {
            opacity: 0.7,
            color: {
              image: piePatternImg,
              repeat: "repeat",
            },
            borderWidth: 3,
            borderColor: "#235894",
          },
        };
        option = {
          backgroundColor: {
            image: bgPatternImg,
            repeat: "repeat",
          },
          title: {
            text: title,
            textStyle: {
              color: "#235894",
            },
          },
          tooltip: {},
          series: [
            {
              name: "零售商",
              type: "pie",
              selectedMode: "single",
              selectedOffset: 30,
              clockwise: true,
              label: {
                fontSize: 18,
                color: "#235894",
              },
              labelLine: {
                lineStyle: {
                  color: "#235894",
                },
              },
              data: res.data,
              itemStyle: itemStyle,
            },
          ],
        };
        this.option = option;
        myChart.setOption(option);
      }
    });
  },
};
</script>
<style lang="scss" scoped>
#sales-hot-statist {
  margin-top: 2%;
  width: 85%;
  height: 650px;
}
</style>